<template>
    <div class="music-duration app-card">
        <div class="title-line">
            <div class="title">听歌时长</div>
            <div class="more"></div>
        </div>
        <div class="content">
            <div class="table-box">
                <!-- 听歌时长柱状图 -->
                <div class="item" v-for="item in data" :key="item.label"
                    :style="`
                        --w: ${ item_width };
                        --h: ${ item.value * 100 + '%' };
                        --text: '${ item.label }'
                    `"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

let data = ref([]);

// 获取今天的日期
const data_size = 10;
const item_width = parseInt(data_size * 1.5);
const one_day_time = 24 * 60 * 60 * 1000;
const today = (new Date()).getTime();
for (let i = 0; i < data_size; i++) {
    let t = today - ((data_size - 1 - i) * one_day_time);
    let todayStr = (new Date(t)).getDate();
    data.value.push({ label: todayStr, value: Math.random() * 0.99 + 0.01 });
}
</script>

<style scoped lang="less">
.music-duration .table-box {
    box-sizing: border-box;
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: space-between;
    padding: 1vw;
    color: #6b7280;

    &>.item {
        width: calc(100% / var(--w));
        height: 100%;
        position: relative;
        top: -3vw;

        &::before {
            content: "";
            display: block;
            width: 100%;
            height: var(--h);
            background-color: #d7f4ff;
            position: absolute;
            bottom: 0;
        }

        &::after {
            content: var(--text);
            display: block;
            width: 100%;
            text-align: center;
            font-size: 2vw;
            position: absolute;
            left: 50%;
            bottom: -3vw;
            transform: translateX(-50%);
        }
    }
}
</style>